<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input id="btn1" type="button" value="普通按钮" />
		
		
		<div id="div1" style="width: 200px; height: 200px; background-color: skyblue;">
			<p id="p1" style="width: 100px; height: 100px; background-color: bisque;">
				
			</p>
		</div>
		
		<script type="text/javascript">
//			document.getElementById("btn1").onclick=function(){
//				alert("点我干嘛?");
//			}
//			document.getElementById("btn1").onclick=function(){
//				alert("你再点我?");
//			}
//			document.getElementById("btn1").onclick=function(){
//				alert("你又点我?");
//			}

			function f1(){
				alert("你点我干嘛");
			}
			//使用事件监听的方式添加
			document.getElementById("btn1").addEventListener("click",f1);
			document.getElementById("btn1").addEventListener("click",function(){
				alert("你再点我?");
			});
			document.getElementById("btn1").addEventListener("click",function(){
				alert("你又点我?");
			});
			
			//删除事件监听
			document.getElementById("btn1").removeEventListener("click",f1);
			
			
			//添加onclick事件
			document.getElementById("div1").addEventListener("click",function(){
				alert("你点击了div1");
			},false);
			
			document.getElementById("p1").addEventListener("click",function(){
				alert("你点击了p1");
				//阻止冒泡
				event.stopPropagation();
			},false);

// 事件传递定义了元素事件触发的顺序,如果你将<p>元素插入到<div>元素中,用户点击<p>元素,哪个元素的"click"事件先被触发呢？
// 在冒泡中,内部元素的事件会先被触发,然后再触发外部元素，即<p>元素的点击事件先触发,然后会触发<div>元素的点击事件。
// 在捕获中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:<div>元素的点击事件先触发,然后再触发<p>元素的点击事件。
		</script>
	</body>
</html>
